<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title>MrClay_Graph</title>
    <link href="MrClay_Graph.css" rel="StyleSheet" type="text/css">
    <style type="text/css">
body {margin-left:2em;}
    </style>
</head>
<h1>MrClay_Graph</h1>

<h2>Simulated Temperature</h2>
<p>Night and day cooling with a linear increase.<br />&fnof;(hour) = 70 + 23 sin((hour - 8) &pi; &divide; 12) + (hour &divide; 7)</p>
<div id="tempGraph"></div>

<h2>Simulated Windspeed</h2>
<p>23 deg at hour 0, linearly decreasing.<br />&fnof;(hour) = max(0, 23 - (hour &divide; 2.2))</p>
<div id="windGraph"></div>

<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="MrClay_Graph.js"></script>
<script type="text/javascript">
window.onload = function() {
    // graph temp
	var getTemp = function (hour) {
		// day heating/night cooling, linearly increasing avg temp
		return 70 + 23 * Math.sin(Math.PI * (hour - 8) / 12) + (hour / 7);
	};
	var hours12hrDay = function (x) {
		switch (true) {
			case (x % 24 == 0): return '12AM';
			case (x % 24 == 12): return '12PM';
			case (x % 24 < 12): return (x % 24) + 'AM';
			default: return ((x % 24) - 12) + 'PM';
		};
	};
	var graph = new MrClay.Graph({
		width : 600
		,height : 150
		,parentId : 'tempGraph'
		,visibleXUnits : 50
		,scaleY : .2
		,center : [24, 73]
	});
	graph.drawGrid({
		xLinesEvery : 3
		,xLabelsEvery : 6
		,xLabelHtml : hours12hrDay
		,yLinesEvery : 10
		,yLabelsEvery : 10
		,yLabelHtml : function (y) {return y + '&deg;F';}
	});
	graph.addContext({lineWidth : "1", strokeStyle : "#ff0000"});
	graph.plotFunction({
		f: getTemp
	});

	// graph wind
	var getWind = function (hour) { // mi/hr
		return Math.max(0, 23 - (hour / 2.2)); 
	};
	graph = new MrClay.Graph({
		width : 600
		,height : 150
		,parentId : 'windGraph'
		,visibleXUnits : 50
		,scaleY : .35
		,center : [24, 15]
	});
	graph.drawGrid({
		xLinesEvery : 3
		,xLabelsEvery : 6
		,xLabelHtml : hours12hrDay
		//,yLinesEvery : 1
		,yLabelsEvery : 10
		,yLabelHtml : function (y) {return y + 'mi/hr';}
	});
	graph.addContext({lineWidth : "1", strokeStyle : "#0000ff"});
	graph.plotFunction({
		f: getWind
	});
};
</script>